<template>
  <div>
    <!-- 轮播图子组件 -->
    <Carousel />
    <!-- 搜索医院子组件 -->
    <Search />
    <!-- 展示医院的结构 -->
    <el-row gutter="20">
      <el-col :span="20">
        <!-- 等级子组件 -->
        <Level @getLevel="getLevel" />
        <!-- 地区子组件 -->
        <Region @getRegion="getRegion" />
        <!-- 展示医院信息的卡片子组件 -->
        <div class="hospital" v-if="hasHospitalArr.length > 0">
          <Card v-for="(item, index) in hasHospitalArr" :key="index" class="item" :hospitalInfo="item" />
        </div>
        <el-empty v-else description="暂无数据"></el-empty>
        <!-- 分页器 -->
        <!-- eslint-disable-next-line vue/no-v-model-argument -->
        <el-pagination v-model:current-page="pageNo" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
          :background="true" layout="prev, pager, next, jumper,->, sizes,total" :total="total"
          @current-change="currentChange" @size-change="sizeChange" />
      </el-col>
      <el-col :span="4">
        <Tip />
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
//引入定义数据和生命周期钩子所需的方法
import { ref, onMounted } from 'vue'
//引入轮播图组件
import Carousel from './carousel/index.vue'
//引入搜索组件
//@ts-ignore
import Search from './search/index.vue'
//引入首页等级组件
//@ts-ignore
import Level from './level/index.vue'
//引入首页地区组件
//@ts-ignore
import Region from './region/index.vue'
//引入展示医院信息的卡片组件
//@ts-ignore
import Card from './card/index.vue'
//引入右侧组件
//@ts-ignore
import Tip from './tip/index.vue'
//引入组合式API
//@ts-ignore
import { reqHospital } from '@/api/home/index'
//引入定义的type进行TS类型约束
//@ts-ignore
import type { Content, HospitalResponseData } from '@/api/home/type'

//分页器需要的数据
let pageNo = ref<number>(1)
let pageSize = ref<number>(10)
//存储已有的医院数据 数量 医院等级 医院地区
let hasHospitalArr = ref<Content>([])
let total = ref<number>(0)
let hosType = ref<string>('')
let districtCode = ref<string>('')

//获取已有的医院数据
const getHospitalInfo = async () => {
  //获取医院的数据，默认获取第一页的十个数据
  let result: HospitalResponseData = await reqHospital(pageNo.value, pageSize.value, hosType.value, districtCode.value)
  //接口成功返回数据，存储医院数组和数量
  if (result.code == 200) {
    hasHospitalArr.value = result.data.content
    total.value = result.data.totalElements
  }
}
//组件挂载完毕时：发送请求
onMounted(() => {
  getHospitalInfo()
})
//分页器页码发生变化时：发送请求
const currentChange = () => {
  getHospitalInfo()
}
//分页器一页大小发生变化时：页码重置为1，发送请求
const sizeChange = () => {
  pageNo.value = 1
  getHospitalInfo()
}
//点击等级时：收集等级参数，发送请求
//子组件自定义事件的回调：获取子组件给父组件传递过来的参数
const getLevel = (level: string) => {
  hosType.value = level
  getHospitalInfo()
}
//点击地区时：收集地区参数，发送请求
//子组件自定义事件的回调：获取子组件给父组件传递过来的参数
const getRegion = (region: string) => {
  districtCode.value = region
  getHospitalInfo()
}
</script>

<style scoped lang="scss">
.hospital {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .item {
    width: 48%;
    margin: 10px 0;
  }
}
</style>